<script setup lang="ts">
  // import { ElTooltipProps } from 'element-plus'
  import { ref } from 'vue'

  const contentHeight = ref('44px')

  const isMaximize = ref(false)

  // const tooltipConfig: Partial<ElTooltipProps> = {
  //   effect: 'light',
  //   showAfter: 300
  // }

  /**
   * 最小化
   */
  function minimizeWindow() {
    window.electron.ipcRenderer.send('minimize-window')
    checkMaximize()
  }

  // const toggleMaximizeTooltipVisible = ref(false)
  /**
   * 最大化/还原
   */
  async function toggleMaximize() {
    await window.electron.ipcRenderer.send('toggle-maximize')
    await checkMaximize()

    // toggleMaximizeTooltipVisible.value = false
    // setTimeout(() => {
    //   toggleMaximizeTooltipVisible.value = false
    // }, tooltipConfig.showAfter)
  }
  /**
   * 关闭
   */
  function closeWindow() {
    window.electron.ipcRenderer.send('close-window')
  }

  async function checkMaximize() {
    const status = await window.electron.ipcRenderer.invoke('get-maximize-status')
    isMaximize.value = status
  }

  window.electron?.ipcRenderer.on('window-resize', checkMaximize)
</script>

<template>
  <div class="" :style="{ height: contentHeight }">
    <div
      :style="{ height: contentHeight }"
      class="border-(b b-solid b-#eee) fixed z-10 -top-3px w-full drag left-0 flex justify-between"
    >
      <div class="no-drag">logo</div>
      <el-button-group class="no-drag action-wrapper">
        <el-button title="最小化" text @click="minimizeWindow">
          <icon-fluent-minimize-16-filled />
        </el-button>
        <el-button :title="isMaximize ? '恢复' : '最大化'" text @click="toggleMaximize">
          <icon-fluent-full-screen-maximize-16-filled v-if="!isMaximize" />
          <icon-fluent-full-screen-minimize-16-filled v-else />
        </el-button>
        <el-button title="关闭" class="close" text @click="closeWindow">
          <icon-fluent-dismiss-16-filled />
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<style scoped lang="less">
  .drag {
    -webkit-app-region: drag;
  }

  .no-drag {
    -webkit-app-region: no-drag;
  }

  .action-wrapper > * {
    @apply py-20px opacity-70;

    &:hover {
      opacity: 1;
    }

    &.close:hover {
      color: white;
      background-color: var(--el-color-danger) !important;
    }
    &.close:active {
      color: white;
      background-color: var(--el-color-dange-dark-2) !important;
    }
  }
</style>
